<template>
  <div>
    <h2>IP: {{ ip }}</h2>
    <el-button @click="clickHandler">ping一下服务器</el-button>
    <h6>{{ msg }}</h6>
    <div class="demo-image__lazy">
      <el-image
        v-for="filname in filenames"
        :key="filname"
        :src="`${totalPre}${filname}`"
        lazy
      >
      </el-image>
    </div>
  </div>
</template>

<script lang="ts">
const spawn = require("child_process").spawn;

import { defineProps, reactive, toRefs } from "vue";
import { ref } from "vue";
export default {
  name: "ImageContainer",
  props: {
    ip: String,
    port: String,
    prefix: String,
    filenames: Array<String>,
  },
  setup(props: {
    ip: String;
    port: String;
    prefix: String;
    filenames: Array<String>;
  }) {
    const msg = ref("");
    const clickHandler = () => {
      let task = spawn("ping", ["server.masaikk.xyz"]);
      task.stdout.on("data", (data: Buffer) => {
        msg.value += data.toString();
      });
    };
    const server = "http://119.23.182.180";
    const imagesInfo = reactive(props);
    const totalPre = `${server}:${imagesInfo.port}/${props.prefix}/`;
    return {
      totalPre,

      clickHandler,
      msg,
    };
  },
};
</script>

<style scoped>
.demo-image__lazy {
  height: 800px;
  overflow-y: auto;
}
.demo-image__lazy .el-image {
  display: block;
  min-height: 400px;
  margin-bottom: 10px;
}
.demo-image__lazy .el-image:last-child {
  margin-bottom: 0;
}
</style>
